<template>
   <view v-if="canShowList.length > 0" class="image-wraper">
        <template v-for="(item,index) in canShowList">
			<view class="image-item">
				<u-image
				    :key="canShowList[index]"
				    :lazy-load="true"
				    :showLoading="true"
				    :src="canShowList[index]"
				    mode="heightFill"
				    :width="width"
					shape="square"
				    @click="previewImage()"
				    class="image"
				><view slot="error" style="font-size: 24rpx;">暂无图片</view></u-image>
			</view>
          
        </template>
    </view>
</template>

<script>
	export default {
		name:"swiper-image",
		props: {
		        list: {
		            type: Array,
		            default: '',
		            required: false
		        },
		        width: {
		            type: String,
		            default: '100%',
		            required: false
		        },
		        height: {
		            type: String,
		            default: '400rpx',
		            required: false
		        },
		        needNoImage: {
		            type: Boolean,
		            default: false,
		            required: false
		        },
		        fontSize: {
		            type: String,
		            default: '32rpx',
		            required: false
		        },
		        radius: {
		            type: String,
		            default: '15rpx',
		            required: false
		        } 
		    },
			watch: {
				list: {
					handler() {
						const imageList = this.list;
						if (imageList && imageList.length > 0) {
							imageList.forEach(item => {
								if(item.startsWith('http')){
									this.canShowList.push(item)
								}else{
									this.canShowList.push(this.$settings.imgBaseURL + item);
								}
							    
							});
							
						} else {
							this.canShowList = [];
						}
						
					},
					immediate: true,
					deep: true
				}
			},
		data() {
			return {
				current: 0,
				canShow: ['jpg', 'jpeg', 'png', 'bmp', 'gif', 'JPG', 'JPEG', 'PNG', 'BMP', 'GIF'],
				canShowList: []
			};
		},
		 methods: {
		        previewImage(index = 0) {
		            uni.previewImage({
		                current: index,
		                indicator: 'number',
		                loop: true,
		                urls: this.canShowList
		            });
		        }
		    },
	}
</script>

<style lang="less" scoped>
.image-item{
	margin-bottom: 10rpx;
	&:last-child{
		margin: 0;
	}
}
.image-wraper {
    background-color: #f1f2f5;
    // border-radius: 25rpx;
	
    overflow: hidden;
    display: inline-block;
    height: 100%;
    width: 100%;
    z-index: 0;
}
</style>